{% extends 'mobile/base.html' %}
{% load static %}

{% block mainbody %}
    <!--头部-->
    <header>
        <div class="header">
            <h1>登录</h1>
            <a href="#" class="return"><i></i></a>
        </div>
    </header>

    <!--内容区-->
    <article class="main-container loginContent">
        <form action="{% url 'mobile_do_register' %}" method="post">
            {% csrf_token %}
            <div class="list">
                <ul class="line">
                    <li><i class="icon-head"></i>
                        <input type="text" id="mobile" name="mobile" placeholder="手机号码">
                    </li>
{#                    {% if %}#}
                    <li><i class="icon-head"></i>
                        <input type="text" id="password" name="password" placeholder="密码">
                    </li>
                    <li class="code"><i class="icon-sms"></i>
                        <input type="tel" id="code" name="code" placeholder="手机收到的校验码">
                        <button type="button" class="dianji">点击获取</button>
                    </li>
                </ul>
            </div>
            <div class="button">
                {#                <button onclick="location.href='{% url "mobile_shop" %}'">快速登录</button>#}
                <button type="submit" class="denglu" onclick="dodeng()">快速登录</button>
            </div>
        </form>

        <div class="cs" style="display:none;text-align: center;padding: 10px">
            测试验证码；<span>1234</span>
        </div>
        <div class="cs" style="text-align: center;padding: 10px; color: red">
            {{ info }}
        </div>
    </article>
{% endblock %}


{% block myjs %}
    {#    <script>#}
    {#        const cs = document.querySelector('.dianji')#}
    {#        cs.addEventListener('click', function () {#}
    {#document.querySelector('.cs').style.cssText = 'display:block; text-align: center; padding: 10px'#}
    {#document.querySelector('.cs').style.display = 'block'#}
    {#            $('.cs').css('display', 'block')#}
    {#        })#}
    {##}
    {#    </script>#}
    <script type="text/javascript">
        {#import lo from "../../static/myadmin/bower_components/moment/src/locale/lo";#}

        {#function dj() {#}
        $("button:contains('点击获取')").click(function () {
            bt = $(this);
            if (bt.html() != "点击获取") {
                return;
            }

            // 点击成功显示
            $('.cs').css('display', 'block')

            var phone = $("#mobile").val();
            //$.get();
            bt = $(this);
            var t = 5;
            bt.html(t + "秒")
            var mytime = setInterval(function () {
                t = t - 1;
                bt.html(t + "秒")
                if (t <= 0) {
                    clearInterval(mytime)
                    bt.html("点击获取");
                    // 时间到了隐藏
                    $('.cs').css('display', 'none')
                }
            }, 1000);

        });

        const code = $('.cs span').text()
        // 点击登录获取验证码
        {#$('.denglu').click(function () {#}
        {#    console.log(code)#}
        {#    $.ajax({#}
        {#                    {% csrf_token %}#}
        {#            type: 'GET',#}
        {#            url: '{% url "mobile_do_register" %}',#}
        {#            dataType: 'text',#}
        {#            data: {cd: code},#}
        {#        }#}
        {#    )#}
        {#    console.log(34)#}
        {#1}#}
        {#)#}

        function dodeng() {
            $.ajax({
                    {#                    {% csrf_token %}#}
                    type: 'GET',
                    url: '{% url "mobile_do_register" %}',
                    dataType: 'text',
                    data: {cd: code},
                }
            )
        }

    </script>
{% endblock %}
